<template>
	<view class="bg">
		<!-- 添加卡提示信息 -->
		<view class="top">
			<view class="top-left">
				<i class="iconfont icon-tubiao-"></i>
			</view>
			<view class="top-right">
				<view class="tip">如果卡号错误请输入ICCID进行校验</view>
				<view class="tip">备注的长度最多8个汉字</view>
			</view>
		</view>
		<!-- 表单信息 -->
		<view class="form">
			<view class="label">卡号 / ICCID：</view>
			<view class="value" :style="{'border-bottom':cardSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input v-model="cardNumber" class="uni-input" placeholder-style="color:#999999" placeholder="请输入卡号或ICCID" @input='inputCard' :disabled="disabled" @focus="focusCard"/>
				<i class="iconfont icon-shanchu close" @click="cardNumber=''"></i>
			</view>
			<view class="label">备注：</view>
			<view class="value" :style="{'border-bottom':remarkSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input v-model="remark" class="uni-input" placeholder-style="color:#999999" placeholder="请输入备注信息" @input='inputRemark' :disabled="disabled" @focus="focusRemark" maxlength="8"/>
				<i class="iconfont icon-shanchu close"  @click="remark=''"></i>
			</view>
		</view>
		<img src="../../../static/img/world.svg" class="img-world"/>
		<view class="bottom">
			<view class="checkbox">
				<checkbox-group @change="checkboxChange" name="limitarea" >
					<label>
						<checkbox value="agree" :checked="false" style="transform:scale(0.7)"/>
					</label>
				</checkbox-group>
				<text>我已审慎阅读并同意</text>
				<a @click="openDeal(item)" v-for="(item,index) in agreements">
					《 <text style="color: #408CFF;margin: 0 3px;">{{item.title}}</text> 》
				</a>
			</view>
			<view class="btn-line">
				<button class="btn" :loading="disabled" @click="addCard">添加</button>
			</view>
		</view>
		<view class="dialog-bg" v-if="showAgreement">
			<view class="dialog-body">
				<view class="dialog-top">
					<text class="dialog-top-text">请详细阅读以下协议</text>
					<text class="dialog-top-icon" @click="showAgreement=false"><i class="iconfont icon-shanchu"></i>关闭</text>
				</view>
				<view class="dialog-title">{{agreement.title}}</view>
				<view class="dialog-content" v-html="agreement.content"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNumber: '',
				remark: '',
				disabled: false,
				cardSelect: false,
				remarkSelect: false,
				agreements: [],
				agreement: {},
				showAgreement: false,
				checked: [],
			}
		},
		async onLoad(){
			
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			let objs= await this.$req.crm('agreement/getLoginProtocol/white',{dictType: 'C_APP'})
			this.agreements = objs.data?objs.data:[]
		},
		methods: {
			openDeal(item){
				this.agreement = item;
				this.showAgreement = true;
			},
			focusCard(){
				this.cardSelect = true;
				this.remarkSelect = false;
			},
			focusRemark(){
				this.cardSelect = false;
				this.remarkSelect = true;
			},
			inputCard(event){
				this.cardNumber = event.detail.value;
			},
			inputRemark(event){
				this.remark = event.detail.value;
			},
			//checkbox change事件
			checkboxChange(event){
				this.checked = event.detail.value;
			},
			//添加卡
			addCard(){
				if(this.cardNumber==''){
					uni.showToast({
						title: '请输入卡号/ICCID',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if(this.remark==''){
					uni.showToast({
						title: '请输入备注信息',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if(this.checked.length==0){
					uni.showToast({
						title: '请阅读并同意协议内容',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				this.disabled = true;
				this.$req.userData("card-customer/tieUserCard", {
					cardNumber: this.cardNumber,
					remark:this.remark,
				}).then(res=>{	
					if(res.code=='200000'){
						uni.showToast({
							title: '添加失败',
							icon: 'none',
							duration: 2000
						})
						return this.disabled = false;
					}
					if(res.code==10000){
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 2000
						})
						this.cardNumber = '';
						this.remark = '';
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/tabbar/cardList/index'
							})
						},1000)
					}
					// if(res._result){}
					
					this.disabled = false;
				}).catch(e=>{
					this.disabled = false;
				})
				
			}
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}
	.top{
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 20upx 5%;
		font-size: 28upx;
		color: #FFFFFF;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top-left{
		width: 50upx;
		height: 50upx;
		position: relative;
		top: 0;
		left: 0;
		text-align: left;
		line-height: 50upx;
	}
	.top-right{
		width: calc(90vw - 70upx);
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.tip{
		width: 100%;
		height: 40upx;
		font-size: 24upx;
		line-height: 40upx;
	}
	.form{
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 5% ;
	}
	.label{
		width: 100%;
		height: 80upx;
		position: relative;
		line-height: 80upx;
		font-size: 28upx;
		color: #333333;
		margin-top: 10px;
	}
	.value{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
	}
	.uni-input {
	    height: 50upx;
	    line-height: 25px;
	    font-size: 30upx;
		 padding: 7px 0;
	    background: #FFF;
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}
	.img-world{
		width: 50%;
		height: auto;
		position: absolute;
		bottom: 20%;
		left: 48%;
		opacity: 0.7;
	}
	.bottom{
		width: 90%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 10% 5%;
	}
	.checkbox{
		width: 100%;
		height: 40upx;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #777777;
		padding: 10upx 0;
		margin-bottom: 20upx;
	}
	.btn-line{
		width: 100%;
		height: 70upx;
		position: relative;
		
	}
	.btn{
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
		background-image: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		letter-spacing: 5px;
	}
	/* --------------- 弹窗样式 ------------------ */
	.dialog-bg{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		background: rgba(0,0,0,0.5);
	}
	.dialog-body{
		width: 100%;
		height: 50%;
		position: absolute;
		bottom: 90upx;
		left: 0;
		border-radius: 20upx 20upx 0 0;
		background-color: #FFFFFF;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		overflow-y: scroll;
	}
	.dialog-top{
		width: 94%;
		height: 90upx;
		position: fixed;
		top: calc(50% - 90upx);
		left: 3%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30upx;
		border-bottom: 1px solid #e6e6e6;
		z-index: 10;
		background-color: white;
	}
	.dialog-top-text{
		color: #333333;
		letter-spacing: 1px;
		font-weight: 400;
	}
	.dialog-top-icon{
		color: #999999;
	}
	.dialog-title{
		width: 90%;
		height: auto;
		position: relative;
		top: 90upx;
		left: 0;
		margin: 30upx 5%;
		line-height: 30upx;
		color: #333333;
		font-weight: bold;
		text-align: center;
	}
	.dialog-content{
		width: 80%;
		height: auto;
		position: relative;
		top: 90upx;
		left: 10%;
		text-align: left;
		margin-bottom: 90px;
	}
	.close{
		position: absolute;
		right: 10px;
		top: 10px;
		color: #999;
	}
</style>
